<template>
  <div class="home">
    <h1>Vue-Router</h1>

    <div class="zi">
      <p>(1)默认是hash模式(带#号),要修改的话： mode: 'history',</p>
      <p>(2) 路由跳转：</p>
      <li>
        <img
          src="https://upload-images.jianshu.io/upload_images/15160944-94d584125a54ebc0?imageMogr2/auto-orient/strip|imageView2/2/w/429/format/webp"
          alt
        />
      </li>
      <p>(3) 路由传参数</p>
      <li>
        1:params传参数
        2:query传参数
      </li>
      <p>(4) 路由导航守卫</p>
      <li>
        router.beforeEach((to, from, next) => {
        <a href="https://router.vuejs.org/zh/guide/advanced/navigation-guards.html" target="_blank">官方讲解</a>
        })
      </li>
      <p>(6) 路由懒加载</p>
      <li>
        () =>import( "@/views/test/route.vue"),
      </li>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    go() {
      this.$router.push({ path: "/home", params: { id: 5 } });
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  text-align: center;
  font-size: 15px;
  .zi {
    text-align: left;
  }
}
</style>